<template>
  <van-nav-bar left-arrow @click-left="back" fixed placeholder="">
    <template #right>
      <van-icon @click="navTo('/msg')" name="chat-o" size="18" />
    </template>
    <template #title>
      <div
        style="background-color: #eee; padding: 5px 30px; border-radius: 5px"
      >
        <van-icon name="search" size="18" />
        <span>搜索商品名称</span>
      </div>
    </template>
  </van-nav-bar>

  <div class="nav">
    <!-- <div class="nav-job">
      <router-link to="/cate"
        ><div><van-icon name="arrow-left" /></div
      ></router-link>
      <div><van-search v-model="value" placeholder="搜索商品名称" /></div>
      <div><van-icon name="chat-o" /></div>
    </div> -->
    <div class="nav-item">
      <div>综合</div>
      <div>价格</div>
      <div>分类</div>
      <div @click="changeLayout"><van-icon name="list-switch" /></div>
    </div>
    <div class="shangpin" :class="{ active: layout == '1' }">
      <div
        class="shangpin-job"
        v-for="item in list"
        @click="navTo('/shangpinView?id=' + item._id)"
      >
        <div class="img"><img :src="item.goods_thumb" alt="" /></div>
        <div>
          <div>{{ item.name }}</div>
          <div class="a">
            <div class="b">
              ￥<span>{{ item.price }}</span>
            </div>
            <div style="text-decoration: line-through">
              {{ item.market_price }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- onload            |    onready              |      onshow  
onCreated 创建后  |   onMounted 挂载后       |      页面被显示时 都会触发  onActivated -->
<script setup>
import { onActivated, ref, onDeactivated } from "vue";
import { getGoodsList } from "@/api/home";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
const route = useRoute();
let category_ids = ref("");
let list = ref([]);
let layout = ref("2"); //  2

function changeLayout(params) {
  layout.value = layout.value === "1" ? "2" : "1";
}

//  如果是正常状态 每次进来都会重新请求
//  为了优化 加了keep-alive  产生了新的问题
//  onMounted只会在第一次进入时执行以下
// 以后再进来 还显示第一次的数据
// onActivated(() => {
//   category_ids.value = route.query.id;
//   getList();
// });

// onDeactivated(() => {
//   category_ids.value = [];
// });

onMounted(() => {
  category_ids.value = route.query.id;
  getList();
});

function getList() {
  getGoodsList({
    category_ids: category_ids.value,
  }).then((res) => {
    console.log(res);
    list.value = res.rows;
  });
}
</script>
<style scoped>
/* .content {
  width: 375px;
  margin: 0 auto;
} */
.nav-job {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
}
.nav-job div {
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.nav-job div:nth-child(3) {
  font-size: 20px;
}
.nav-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.shangpin {
  padding: 10px 10px;
  display: flex;
  flex-wrap: wrap;
}
.shangpin .shangpin-job {
  width: 50%;
}
.shangpin .shangpin-job img {
  width: 170px;
  height: 170px;
}
.shangpin .a {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.shangpin .a div:nth-child(2) {
  margin-right: 20px;
}
.shangpin .b {
  color: #f00;
}
.shangpin .b span {
  color: #f00;
  font-size: 18px;
}

/*   一排一个 */

.shangpin {
  padding: 10px 10px;
  display: flex;
  flex-wrap: wrap;
}
.shangpin.active .shangpin-job {
  width: 100%;
  display: flex;
  margin: 10px 0;
}
.shangpin.active .shangpin-job img {
  width: 100px;
  height: 100px;
}
.shangpin.active .shangpin-job .img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.shangpin .a {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.shangpin .a div:nth-child(2) {
  margin-right: 20px;
}
.shangpin .b {
  color: #f00;
}
.shangpin .b span {
  color: #f00;
  font-size: 18px;
}
</style>
<script setup></script>
